<template>
  <el-main class="container" style="padding: 0">
    <el-row :gutter="15">
      <el-col>
				<el-card 
          shadow="never" 
          :body-style="{padding: 0, backgroundColor: theme === 'dark' ? '222225' : '#f0f2f5', border: 'none'}"
        >
					<Card />
				</el-card>
			</el-col>
    </el-row>
    <el-row :gutter="15">
      <el-col>
				<el-card shadow="never">
					<Histogram />
				</el-card>
			</el-col>
    </el-row>
    <Analysis />
    <Table />
  </el-main>
</template>

<script setup>
import {defineAsyncComponent, onMounted} from 'vue'
import {ElNotification} from 'element-plus'
import {generateWelcomeMsg} from '@/utils/tools'
import {setItem, getItem} from '@/utils/local'
import {WELCOME_TEXT} from '@/utils/constant'
import {formatDateWeek} from '@/function/date'
import useConfigStore from '@/store/config'

const {theme} = useConfigStore()

const Card = defineAsyncComponent(() => import('./components/Card'))
const Histogram = defineAsyncComponent(() => import('./components/Histogram'))
const Analysis = defineAsyncComponent(() => import('./components/Analysis'))
const Table = defineAsyncComponent(() => import('./components/Table'))

const date = (formatDateWeek(new Date())).curDate.split(' ')[0]

onMounted(() => {
  if (!getItem(WELCOME_TEXT)) {
    ElNotification({
      title: `今天是${date}`,
      message: `
        ${generateWelcomeMsg()}，${'username'}。
        欢迎进入v-admin，这是vue3.2.x版，祝您有个愉快的心情
      `,
      type: 'info',
    })
  }
  setItem(WELCOME_TEXT, `${WELCOME_TEXT} is reloaded`)
})

</script>

<style scoped lang="scss">
.el-card {
  border: none !important;
}
.container {
  .line {
    height: 400px;
    margin-bottom: 20px;
    background-color: $main-bg-p;
  }
  .analysis-wrapper {
    width: 100%;
    padding: 10px 0;
  }
  .table-wrapper {
    width: 100%;
    // margin-top: 20px;
  }
  .avatar {
    @include wh(32px, 32px);
    @include borderRadius(50%);
  }
}
</style>